/******************************************************************************************
 * Import
 ******************************************************************************************/
import _ from 'lodash';
import React, {Component} from 'react';
import { StyleSheet, Clipboard, TextInput, ListView } from 'react-native';
import Design from '../../../design';
import Config from '../../../config';
import ScreenBase from '../../../library/base/screen';
import { Toast, Modal } from 'antd-mobile-rn';
import { ListItem, CheckBox, Body, List, Button, Icon, Text, Content } from 'native-base';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';
import {
    HttpText, HttpHesq
} from '../../../library/func';

// svg
import Licon from '../../../library/comp/project/icon';

// const datas = [
//     'Simon Mignolet',
//     'Nathaniel Clyne',
//     'Dejan Lovren',
//     'Mama Sakho',
//     'Alberto Moreno',
//     'Emre Can',
//     'Joe Allen',
//     'Phil Coutinho',
// ];

/******************************************************************************************
 * Screen
 ******************************************************************************************/
export default class ScreenList extends ScreenBase {
    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            // 购物车数据
            cart: [
                {
                    id:1,
                    is_checked:true,
                    product_object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                    set_name:'【人气水果】泰国香水椰青1个装(单果750-1000g)',
                    set_price:20,
                    count:10,
                },
                {
                    id:2,
                    is_checked:true,
                    product_object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                    set_name:'【人气水果】泰国香水椰青4个装(单果750-1000g)',
                    set_price:30,
                    count:10,
                },
                {
                    id:3,
                    is_checked:false,
                    product_object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                    set_name:'【人气水果】泰国香水椰青2个装(单果750-1000g)',
                    set_price:22,
                    count:10,
                },
                {
                    id:4,
                    is_checked:true,
                    product_object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                    set_name:'【人气水果】泰国香水椰青3个装(单果750-1000g)',
                    set_price:25,
                    count:10,
                }
            ],
            // 商品总价格
            amountAll: 0,
            // 全选
			allchecked: false,
			// 系统信息,获取起送费
            traffic_limit: 10,
            basic: true,
            // cart: this.state.cart,
        }
        
    }

    // didMount
	componentDidMount() {
        this.count_total()
    }


    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    // 删除选中商品
    partDelete = e =>{
        Modal.alert('确定删除该商品？','', [
            { text: '取消', onPress: () => console.log('cancel'), style: '取消' },
            { text: '确定', onPress: () => {
                // 组织数据，判断选中
                let ids = '';
                for (var i in this.state.cart) {
                    if(this.state.cart[i].is_checked){
                        ids += this.state.cart[i].id+','
                    }
                    this.state.cart[i].is_checked = true
                    this.setState({
                        
                    })
                }
                //去掉最后一个逗号(如果不需要去掉，就不用写)
                if (ids.length > 0) {
                    ids = ids.substr(0, ids.length - 1);
                }
                Toast.info('需要删除的商品ID为：'+ids)
            } },
        ]);
    }
    // 删除单个商品
    deleteRow = (secId, rowId, rowMap) => {
        rowMap[`${secId}${rowId}`].props.closeRow();
        const newData = [...this.state.cart];
        newData.splice(rowId, 1);
        this.setState({ cart: newData });
        this.count_total()
    }
    // 购物车 + 操作
    add = (secId, rowId, rowMap) => {
        this.state.cart[rowId].count++;
        this.setState({

        })
        this.count_total()
    }
    // 购物车 - 操作
    sub = (secId, rowId, rowMap) => {
        this.state.cart[rowId].count--;
        this.setState({
            
        })
        this.count_total()
    }
    // 修改商品选中状态
    changeChecked = (secId, rowId, rowMap) => {
        this.state.cart[rowId].is_checked = !this.state.cart[rowId].is_checked;
        this.setState({
                
        })
        // 判断当前是不是所有商品都处于选中状态，如是，则选中全选按钮
        for (var i in this.state.cart) {
            if(this.state.cart[i].is_checked) {
                this.state.allchecked = true
                this.setState({
                
                })
            } else {
                this.state.allchecked = false
                this.setState({
                
                })
                break
            }
        }

        this.count_total()

    }

    // 全部选中/取消选中购物车所有数据
    _checkall = (e) => {
        if (this.state.cart && this.state.cart.length == 0) {
			Toast.info('您的购物车还没有商品')
            return;
        }

        if(this.state.allchecked) {
            this.state.allchecked = false;
            for (var i in this.state.cart) {
                this.state.cart[i].is_checked = false
                this.setState({

                })
            }
        } else {
            this.state.allchecked = true;

            for (var i in this.state.cart) {
                this.state.cart[i].is_checked = true
                this.setState({
                    
                })
            }
        }
        
        this.count_total()
    }

    // 计算总额
    count_total(){
        var total_temp = 0;
        
        for(var product of this.state.cart){
            if(product.is_checked){
                total_temp += parseFloat((parseFloat(product.set_price)*parseInt(product.count)).toFixed(2))
            }
        }
        this.setState({
            amountAll: total_temp.toFixed(2)
        })
    }

    

    // 总render
    render() {
        // const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        return (
            <CPage>
				<CContent mb='120' mt='90'>
                    {/* 购物车数据 */}
                    <CColumn ma='20' mb='120' bg='#FFF' ra='20' pb='20'>
                        {/* 店铺名称 */}
                        <CBetween bb='2 #eee' px='20' h='80' lh='80' y='center' style={{width:'100%'}}>
                            <CItemX y='center'>
                                <CIcon icon={ Licon["shop-stroew"] } color='#6d6d6d' w='26' h='28'></CIcon>
                                <CText size='28' pl='16' color='#555'>和社区</CText>
                            </CItemX>
                            <CHand onPress={this.partDelete}>
                                <CIcon color="#434343" w='38' h='38' icon={ Licon["shop-delete"] }></CIcon>
                            </CHand>
                        </CBetween>
                        {/* {this.state.cart.map((item, index) => { */}
                            {/* return ( */}
                                <List
                                    leftOpenValue={60}
                                    rightOpenValue={-60}
                                    dataSource={this.ds.cloneWithRows(this.state.cart)}
                                    style={{width:'100%'}}
                                    renderRow={(item, secId, rowId, rowMap) =>
                                        <ListItem style={{display:'flex',width:'100%',borderBottomColor:'transparent',paddingTop:0,paddingBottom:0,paddingLeft:10}}>
                                            <CheckBox checked={item.is_checked} color='#d33c2e' style={{borderRadius:20}} onPress={_=>this.changeChecked(secId,rowId,rowMap)} />
                                            <Body>
                                                <CItemX df px='20' py='28'>
                                                    <CImage lazyLoad={true} df mode="aspectFit" w='130' h='130' source={{uri:item.product_object.set_image_small}}/>
                                                    <CColumn df x='left' pl='20' h='130'>
                                                        <CText color='#333' size='25' h='72' mb='28' oh lh='36'>{item.set_name}</CText>
                                                        <CBetween h='50' y='center' f='1'>
                                                            <CText color='#d53b31' size='30' bold f='6'>￥{item.set_price}</CText>
                                                            <CBetween f='4' >
                                                                <CHand onPress={_=>this.sub(secId,rowId,rowMap)}>
                                                                    <CIcon icon={ Licon.sub } color='#d53b31' w='38' h='38'></CIcon>
                                                                </CHand>
                                                                <CText size='32' color='#525252' mx='2'>{item.count}</CText>
                                                                <CHand onPress={_=>this.add(secId,rowId,rowMap)}>
                                                                    <CIcon icon={ Licon.add } color='#d53b31' w='38' h='38'></CIcon>
                                                                </CHand>
                                                            </CBetween>
                                                        </CBetween>
                                                    </CColumn>
                                                </CItemX>
                                            </Body>
                                        </ListItem>
                                    }
                                    renderRightHiddenRow={(data, secId, rowId, rowMap) =>
                                        <Button full danger onPress={_ => this.deleteRow(secId, rowId, rowMap)}>
                                            <CText color='#fff'>删除</CText>
                                        </Button>
                                    }
                                />
                            {/* ) */}
                        {/* })} */}
                        
                    </CColumn>
                </CContent>

                {/* 顶部 star */}
                <CHeader h='90' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <CBetween h='90' px='10' bg='#fff' style={{width:'100%'}}>
                        <CHand>
                            <CIcon color="#434343" w='38' h='38' icon={ Licon.gobcak }></CIcon>
                        </CHand>
                        <CText size='30' color='#000'>购物车</CText>
                        <CText></CText>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}

                {/* Footer */}
				<CFooter h='90' bg='#fff' bt='1 solid #eee'>
					<CBetween>
						<CLine f='7'>
                            {/* 全选按钮 */}
                            <ListItem style={{display:'flex',width:100}}>
                                <CheckBox checked={this.state.allchecked} color='#d33c2e' style={{borderRadius:20}} onPress={this._checkall} />
                                <Body>
                                    <CText color='#4a4a4a' size='31' ml='15'>全选</CText>
                                </Body>
                            </ListItem>

							<CItemY x='right' y='center' f='1' pr='20'>
								<CHand y='center'>
									<CText mr='10'>不含运费</CText>
									<CText size='28' mr='20'> 合计:</CText>
									<CText size='28' color='#d53b31' bold>￥{this.state.amountAll}</CText>
								</CHand>
								<CText color='#ddd' size='22'>已享受 0 元优惠</CText>
							</CItemY>
						</CLine>

						<CText h='90' lh='90' x='center' color='#fff' bg='#d53b31' size='31' f='3' style={{textAlign:'center'}} >结算</CText>
					</CBetween>
				</CFooter>
            </CPage>
        )
    }
}